<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!--用于vue接管-->
<div id="app" style="width: 600px; height: 600px;">
    <!--echarts的容器-->
    <div id="container" style="min-width: 400px; height: 400px; background-color: rgb(70, 70, 100);"></div>
</div>

</body>
<script src="./js/echarts.min.js"></script>
<script src="./js/china.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

    var app = new Vue({
        el : "#app",
        data : {

        },
        methods : {
            init(){
                var mychart = echarts.init(document.getElementById("container"));
                //异步加载数据
                axios.get("./js/weibo.json").then(function(response){
                    console.log(response);
                    var Data = function (index) {
                        data = response.data[index];
                        var px = data[0] / 1000;
                        var py = data[1] / 1000;
                        var res = [[px, py]];

                        for (var i = 2; i < data.length; i += 2) {
                            var dx = data[i] / 1000;
                            var dy = data[i + 1] / 1000;
                            var x = px + dx;
                            var y = py + dy;
                            res.push([x, y]);
                            px = x;
                            py = y;
                        }
                        return res;
                    }
                    // 设置echarts
                    mychart.setOption({
                        title : {
                            text: "微博签到数据点亮中国",
                            textStyle: {
                                color : "rgb(255, 255, 255)"
                            },
                            subtext: "From ThinkGIS",
                            subtextStyle: {
                                color : "rgb(200, 200, 200)"
                            },
                            left : "center",
                            top: "top"
                        },

                        visualMap: [
                            {
                                type: 'piecewise',
                                //设置图例样式
                                pieces: [
                                    { gte: 10000, symbol:"circle", label: "强"},
                                    { gte: 1000, lte: 9999, symbol:"circle", label: "中"},
                                    { gte: 0, lte: 999, symbol:"circle", label: "弱"},

                                ],
                                inRange: {
                                    color: ["rgb(0, 128, 255)", "rgb(0, 255, 255)", "rgb(240, 240, 240)"]
                                },
                                top: "top",
                                orient: "horizontal",
                                showLabel: true,
                                textStyle : {
                                    color : "rgb(160, 160, 160)"
                                },
                                inverse: "true"
                            }
                        ],
                        geo: {
                            //中国地图
                            type: "map",
                            map: 'china',
                            //地图区域的颜色和边框的颜色
                            itemStyle: {
                                areaColor: "rgb(50, 50, 50)",
                                borderColor: "rgb(0, 0, 0)"
                            }
                        },
                        series: [{
                            name: "弱",
                            //散点图
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            //标记的大小
                            symbolSize: 1,
                            //大数据量优化
                            large: true,
                            itemStyle: {
                                color: 'rgb(0, 128, 255)'
                            },
                            data: Data(0)
                        }, {
                            name: "中",
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            symbolSize: 1,
                            large: true,
                            itemStyle: {
                                color: 'rgb(0, 255, 255)'
                            },
                            data: Data(1)
                        }, {
                            name: "强",
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            symbolSize: 1,
                            large: true,
                            itemStyle: {
                                color: 'rgb(240, 240, 240)'
                            },
                            data: Data(2)
                        }]
                    })
                })
            }

        },
        mounted(){
            this.init();
        }
    });


</script>
</html>